document.write(`
    <style>
        .pager {
            display: inline-block;
            text-align: center;
            min-width: 20px;
            padding: 5px;
            margin: 5px;
            border-radius: 3px;
            cursor: pointer;
        }
    </style>
`);

Vue.component("el-pagination", {
    props: ["background", "page-size", "current-page", "layout", "total", "page-sizes"],
    template: `
            <div>
               <span class="pager"
               :style="getStyle(0)">共{{total}}页</span>
               <select v-if="pageSizes != undefined"
                    v-model="selectSize" @change="pageSize = selectSize">
                    <option v-for="size in pageSizes" :value="size">{{size}}条/页</option>
               </select>
               <template v-for="l in layouts">
                        <span v-if="l=='first'" class="pager" style="background-color: #eee"
                              @click="curPage = 1 ;$emit('page-change',curPage)" >首页</span>
                        <span v-if="l=='prev'" class="pager"
                              :style="getStyle(0)"
                              @click="curPage += (curPage==1?0:-1) ;$emit('page-change',curPage)">上一页</span>
                        <span v-if="l=='pager'" class="pager" v-for=" p in pages"
                              :style="getStyle(p)"
                              @click="curPage = p ;$emit('page-change',curPage)">{{p}}</span>
                        <span v-if="l=='next'" class="pager"
                              :style="getStyle(0)"
                              @click="currPage += (curPage==pages?0:1) ;$emit('page-change',curPage)">下一页</span>
                        <span v-if="l=='last'" class="pager" style="background-color: #eee"
                              @click="curPage=pages ;$emit('page-change',curPage)">末页</span>
                    </template>


            </div>
        `,
    data() {
        return {
            curPage: 0,
            layouts : [],
            selectSize : 0
        };
    },
    created() {
        this.curPage = parseInt(this.currentPage);
        // 字符串切割数组
        this.layouts = this.layout.split(/\W+/);
        this.selectSize = this.pageSize;
    },
    computed: {
        // 总页数
        pages() {
            let all = this.total / this.pageSize;
            all = Math.floor(all);   // 取整
            if (this.total % this.pageSize != 0){
                all ++;
            }
            return all;
        }
    },
    methods: {
        getStyle(p) {
            let ret = {backgroundColor: null};
            if (this.background != undefined) {
                ret.backgroundColor = '#eee';
            }
            if (p == this.curPage) {
                ret.backgroundColor = '#aaa';
            }
            return ret;
        },

    }
})